<template>
    <div class="page">
        <el-tabs v-model="Data.tabName">
            <el-tab-pane label="审核列表" :name="1">
                <div class="search-form zw-form-layout">
                    <el-form ref="formRef" :model="searchForm" label-width="auto">
                        <el-row :gutter="24">
                            <el-col :span="8">
                                <el-form-item label="申请人" prop="applicant">
                                    <el-input
                                        v-model="searchForm.applicant"
                                        placeholder="输入昵称、手机号、ID查询"
                                        clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="邀请人" prop="inviter">
                                    <el-input
                                        v-model="searchForm.inviter"
                                        placeholder="请输入邀请的昵称、手机号、ID查询"
                                        clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="来源店铺" prop="shopId">
                                    <el-select v-model="searchForm.shopId" reserve-keyword placeholder="全部店铺">
                                        <el-option label="全部店铺" :value="0" />
                                        <el-option
                                            v-for="item in shopList"
                                            :key="item.shopId"
                                            :label="item.shopName"
                                            :value="item.shopId" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="邀请人" prop="inviterType">
                                    <el-select v-model="searchForm.inviterType" placeholder="不限">
                                        <el-option label="不限" :value="0" />
                                        <el-option label="总部" :value="1" />
                                        <el-option label="分销员" :value="2" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="申请类型" prop="applyType">
                                    <el-select v-model="searchForm.applyType" placeholder="全部">
                                        <el-option label="全部" :value="0" />
                                        <el-option label="首次申请" :value="1" />
                                        <el-option label="升级" :value="2" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="审核状态" prop="status">
                                    <el-select v-model="searchForm.status" placeholder="全部">
                                        <el-option label="全部" :value="0" />
                                        <el-option label="待审核" :value="1" />
                                        <el-option label="审核通过" :value="2" />
                                        <el-option label="审核拒绝" :value="3" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="申请时间" prop="createdAt">
                                    <el-date-picker
                                        v-model="createdAt"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="16" class="zw-form-btns">
                                <el-button type="primary" @click="searchHandler">查询</el-button>
                                <el-button plain @click="resetHandler">清空</el-button>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <el-row>
                    <el-col class="zw-table-btns"> </el-col>
                </el-row>
                <el-table :data="Data.tableData" border>
                    <el-table-column align="center" prop="dtbNickname" label="申请人">
                        <template v-slot="{ row }">
                            <div v-if="row.dtbNickname">{{ row.dtbNickname }}</div>
                            <div v-if="row.dtbMobile">{{ row.dtbMobile }}</div>
                            <div v-if="row.dtbUid">{{ row.dtbUid }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="inviterNickname" label="邀请人">
                        <template v-slot="{ row }">
                            <div>
                                <div v-if="row.inviterNickname">{{ row.inviterNickname }}</div>
                                <div v-if="row.inviterMobile">{{ row.inviterMobile }}</div>
                                <div v-if="row.inviterUid">{{ row.inviterUid }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="level" label="原等级"> </el-table-column>
                    <el-table-column align="center" prop="applyLevel" label="申请等级"> </el-table-column>
                    <el-table-column align="center" prop="applyTypeName" label="申请类型"> </el-table-column>
                    <el-table-column align="center" prop="applyAt" label="申请时间"> </el-table-column>
                    <el-table-column align="center" prop="shopName" label="来源店铺"> </el-table-column>
                    <el-table-column align="center" prop="statusName" label="申请状态">
                        <template #default="{ row }">
                            <span v-if="row.status == 1" class="wait"></span>
                            <span v-if="row.status == 2" class="pass"></span>
                            <span v-if="row.status == 3" class="error"></span>
                            {{ row.statusName }}
                        </template>
                    </el-table-column>
                    <el-table-column width="140" label="操作">
                        <template #default="scope">
                            <el-button
                                size="small"
                                v-show="scope.row.status == 1"
                                v-auth="'distribution_audit:audit'"
                                @click.stop="refundAuditHandler(scope.row)">
                                拒绝
                            </el-button>
                            <el-button
                                size="small"
                                v-show="scope.row.status == 1"
                                v-auth="'distribution_audit:audit'"
                                @click.stop="passAuditHandler(scope.row)">
                                通过
                            </el-button>
                            <el-button
                                size="small"
                                v-auth="'distribution_audit:view_reason'"
                                v-show="scope.row.status == 3"
                                @click="showReasonHandler(scope.row)">
                                查看原因
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination zw-pagination">
                    <Pagination
                        :total="Data.totalCount"
                        :page-size="searchForm.perPage"
                        :current-page="searchForm.page"
                        @size-change="onSizeChange"
                        @pageChange="pageChange" />
                </div>
            </el-tab-pane>
            <el-tab-pane label="审核设置" :name="2">
                <Setting v-if="checkPermission('distribution_members:level_view') && Data.tabName == 2"> </Setting>
                <div class="none" v-else>没有页面查看权限，请前往账号管理页面配置</div>
            </el-tab-pane>
        </el-tabs>

        <el-dialog destroy-on-close v-model="dialog.refundVisible" title="提示" width="40%">
            <div class="dialog_header">确定拒绝吗？</div>
            <el-form ref="dialogForm" :model="dialog" label-width="0">
                <el-form-item
                    label=""
                    :rules="[
                        { required: true, message: '请填写拒绝理由', trigger: 'blur' },
                        { pattern: /\S/g, message: '请填写拒绝理由', trigger: 'blur' }
                    ]"
                    prop="remark">
                    <el-input
                        type="textarea"
                        rows="4"
                        v-model="dialog.remark"
                        show-word-limit
                        maxlength="50"
                        placeholder="请填写拒绝理由"
                        autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialog.refundVisible = false">取消</el-button>
                    <el-button type="primary" @click="refundAuditComfirmHandler"> 确定 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="">
import { ref, reactive, inject, onMounted, onUnmounted, computed } from 'vue';
import { format, floatDivide, isNotEmpty, checkPermission } from '@/commons/utils.js';
import { ElMessage, ElMessageBox } from 'element-plus';
import request from '@/request';
import { getShopListHook } from '@/hooks';
import Pagination from '@/components/Pagination.vue';
import Setting from './setting.vue';
const confirm = inject('confirm');
const formRef = ref(null);
const dialogForm = ref(null);
let shopList = reactive([]);
const searchForm = reactive({
    applicant: '',
    inviter: '',
    shopId: 0,
    inviterType: 0,
    applyType: 0,
    status: 1,
    applyTimeStart: '',
    applyTimeEnd: '',
    page: 1,
    perPage: 10
});
const Data = reactive({
    tabName: 1,
    totalCount: 0,
    tableData: []
});
const dialog = reactive({
    refundVisible: false,
    id: '',
    remark: ''
});
const createdAt = computed({
    get() {
        return [searchForm.applyTimeStart, searchForm.applyTimeEnd];
    },
    set(val) {
        if (val) {
            searchForm.applyTimeStart = format(val[0], 'YYYY-MM-DD HH:mm:ss');
            searchForm.applyTimeEnd = format(val[1], 'YYYY-MM-DD 23:59:59');
        } else {
            searchForm.applyTimeStart = '';
            searchForm.applyTimeEnd = '';
        }
    }
});

// 获取来源店铺
const getshopList = async () => {
    const { data } = await getShopListHook();
    shopList.length = 0;
    const list = data.list;
    Object.assign(shopList, list);
};
const getTableData = async () => {
    const { data } = await request('auditDistributionMemberListServ', searchForm);
    const list = data.list || [];
    Data.tableData.length = 0;
    Data.tableData.push(...list);
    Data.totalCount = data.totalCount;
};
const resetHandler = () => {
    formRef.value.resetFields();
};
const pageChange = pageNum => {
    searchForm.page = pageNum;
    getTableData();
};
const onSizeChange = pageSize => {
    searchForm.perPage = pageSize;
    getTableData();
};
const searchHandler = () => {
    searchForm.page = 1;
    getTableData();
};

const refundAuditHandler = row => {
    dialog.id = row.id;
    dialog.remark = '';
    dialog.refundVisible = true;
};

const refundAuditComfirmHandler = () => {
    dialogForm.value.validate(valid => {
        if (valid) {
            let params = { id: dialog.id, reason: dialog.remark, option: 3 };
            comfirmHandler(params);
        }
    });
};

const passAuditHandler = async row => {
    try {
        if (await confirm(`确认通过吗？`)) {
            let { id } = row;
            let params = { id, option: 2, reason: '' };
            comfirmHandler(params);
        }
    } catch (e) {}
};

// 审核提交
const comfirmHandler = para => {
    request('auditDistributionMemberServ', para).then(() => {
        ElMessage.success(`操作成功`);
        dialog.refundVisible = false;
        getTableData();
    });
};

const showReasonHandler = row => {
    ElMessageBox.alert(row.reason, '查看原因', {
        confirmButtonText: '确定',
        center: false
    });
};

onMounted(() => {
    getshopList();
    getTableData();
});

onUnmounted(() => {});
</script>
<style></style>
<style lang="scss" scoped>
.page {
    margin-top: -24px;
    :deep {
        .el-tabs {
            --el-tabs-header-height: 60px;
        }
        .el-tabs__item {
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #35383a;
            &.is-active {
                color: #ff6b00;
            }
        }
        .el-tabs__content {
            position: unset;
        }
        .el-tabs__nav-wrap::after {
            height: 1px;
        }
    }
    .wait {
        width: 8px;
        height: 8px;
        background: #ffd500;
        border-radius: 4px;
        display: inline-block;
    }
    .pass {
        width: 8px;
        height: 8px;
        background: #32d1ad;
        border-radius: 4px;
        display: inline-block;
    }
    .error {
        width: 8px;
        height: 8px;
        background: #ff4a1a;
        border-radius: 4px;
        display: inline-block;
    }
    .dialog_header {
        text-align: center;
        margin-bottom: 12px;
    }
    .none {
        text-align: center;
        margin-top: 30px;
    }
    .el-table {
        box-shadow: none;
        :deep(.el-table__empty-block) {
            border-bottom: 1px solid #eaeaea;
        }
    }
}
</style>
